<template>
  <div ref="containerRef" class="container" />
</template>

<script setup lang="ts">
import * as STERIC from 'steric';
import speedUrl from '@/assets/img/speed.jpg?url';
import goodsUrl from '@/assets/gltfs/原子货品.gltf?url';

const containerRef = ref();
let app: STERIC.App;
function init() {
  const goods = app.create({
    type: 'gltf',
    url: goodsUrl,
    complete() {
      console.log('加载完成');
    },
  });
  let x = 10;
  goods.on('click', () => {
    window.alert('click');
    app.utils.tween(goods.position).to({
      x,
    }).onStart(() => {
      x += 10;
    }).duration(500) // 周期
      .start(); // 执行
  });
}
onMounted(() => {
  app = new STERIC.App({
    background: speedUrl,
    container: containerRef.value,
    debug: true,
  });
  init();
});

</script>

<style scoped lang='scss'>
.container {
  width: 100%;
  height: 100%;
}
</style>
